<template>
  <section>
    <h3>instance1: 生成一个带填充色的长方形</h3>
    <canvas id="demo1" class="demo1" width="500" :height="demo1.height">
      <!-- default content -->
      <p>your browser does`t support canvas</p>
    </canvas>
    <h3>instance12: 待定</h3>
  </section>
</template>
<script>
export default {
  data () {
    return {
      demo1: {
        width: 400, // default 300
        height: 200 // default 150
      }
    }
  },
  mounted () {
    this.renderChart()
  },
  methods: {
    getCtx (id) {
      const canvas = document.getElementById(id)
      // 获得渲染上下文和它的绘画功能↓
      if (canvas.getContext) { // 检查支持性
        const ctx = canvas.getContext('2d')
        return ctx
      } else {
        throw new Error('your browser does`t support canvas')
      }
    },
    renderChart () {
      const ctx = this.getCtx('demo1')
      this.renderGreenRectangle(ctx)

      this.handlerPathDraw(ctx)
    },
    // 路径绘制
    handlerPathDraw (ctx) {
      // beginPath closePath stroke fill moveTo lineTo arc
      // 绘制一个三角形
      ctx.fillStyle = 'rgba(0, 255, 0, 1)'
      // 填充三角形
      ctx.beginPath()
      ctx.moveTo(200, 10)
      ctx.lineTo(180, 35)
      ctx.lineTo(220, 35)
      ctx.fill()
      // 边框三角形
      ctx.beginPath()
      ctx.moveTo(240, 10)
      ctx.lineTo(220, 35)
      ctx.lineTo(260, 35)
      ctx.lineTo(240, 10)
      ctx.stroke()
      ctx.closePath()
      // 圆弧笑脸
      ctx.beginPath()
      // x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。
      // 这些都是以 x 轴为基准。参数anticlockwise为一个布尔值。为 true 时，是逆时针方向，否则顺时针方向。
      // arc(x, y, radius, startAngle, endAngle, anticlockwise)
      ctx.arc(350, 100, 50, 0, Math.PI * 2, true) // 绘制
      ctx.moveTo(385, 100)
      ctx.arc(350, 100, 35, 0, Math.PI, false)   // 口 (顺时针)
      ctx.moveTo(335, 85)
      ctx.arc(330, 85, 5, 0, Math.PI * 2, true)  // 左眼
      ctx.moveTo(375, 85)
      ctx.arc(370, 85, 5, 0, Math.PI * 2, true)  // 右眼
      ctx.stroke()
    },
    // 绘制矩形
    renderGreenRectangle (ctx) {
      ctx.fillStyle = 'rgba(255, 0, 0, 1)'
      ctx.fillRect(10, 10, 150, 100)

      ctx.fillStyle = 'rgba(0, 0, 255, .5)'
      ctx.fillRect(50, 50, 150, 100)

      ctx.clearRect(30, 30, 100, 50)

      ctx.strokeRect(40, 40, 80, 30)
    }
  }
}
</script>
<style lang="less" scoped>
section {
  width: 100%;
  min-height: 100vh;
  border: dashed 1px #f00;
  .demo1 {
    border: solid 1px #00f;
    width: 400; // 此处不生效，需在canvas标签元素上设置width&height属性
  }
}
</style>
